<template>
  <el-container>
    <el-dialog title="编辑准停道路" :visible.sync="visible" :before-close="handleClose" center>
      <el-form ref="formParam" :model="formParam"
               label-position="left" label-width="100px" :rules="rules"  style="width: 400px; margin-left:50px;">
        <el-form-item label="道路名称" prop="park_name">
          <el-input readonly  v-model="formParam.park_name"></el-input>
        </el-form-item>
        <el-form-item label="起始位置" prop="chargeRoad_no">
          <el-input readonly v-model="formParam.chargeRoad_no" ></el-input>
        </el-form-item>
        <el-form-item label="终止位置" prop="chargeRoad_name">
          <el-input v-model="formParam.chargeRoad_name" clearable placeholder="终止位置"></el-input>
        </el-form-item>
        <el-form-item label="准停期始" prop="chargeUnit_name">
          <el-input v-model="formParam.chargeUnit_name" clearable placeholder="准停期始"></el-input>
        </el-form-item>
        <el-form-item label="准停位置" prop="chargeUnit_name">
          <el-input v-model="formParam.chargeUnit_name2" clearable placeholder="准停位置"></el-input>
        </el-form-item>
        <el-form-item label="停车场数" prop="chargeUnit_name">
          <el-input v-model="formParam.chargeUnit_name3" clearable placeholder="停车场数"></el-input>
        </el-form-item>
        <el-form-item label="泊位数" prop="chargeUnit_name">
          <el-input v-model="formParam.chargeUnit_name4" clearable placeholder="泊位数"></el-input>
        </el-form-item>
        <el-form-item label="所属单位" prop="roadStatus">
          <el-select v-model="formParam.roadStatus" placeholder="所属单位">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div  slot="footer" class="dialog-footer">
        <el-button @click="selectPlaceByPark" class="btn-search_four" type="success">选择泊位
        </el-button>
        <el-button @click="updateChargesUnit('formParam')" class="btn-search" type="primary">保存
        </el-button>
        <el-button class="btn-search" @click="resetForm('formParam')" >取消
        </el-button>
      </div>
    </el-dialog>

    <person-child-dialog-dw :dialogDwVisible.sync="dwVisible"
                            @dwName5="selectDwname"
                            :dwType="dwType"
                            :dwLoading.sync="dwLoading">
    </person-child-dialog-dw>
  </el-container>
</template>

<script>
  import ParkingDialog from '../../operatingManagement/parkingflowChild/parkingDialog'
  import PersonChildDialogDw from '../../organizationManagement/personChild/personChildDialogDw'

  export default {
    components: {
      PersonChildDialogDw,
      ParkingDialog
    },
    name: 'charge-unit-edit',
    data() {
      return {
        visible: false,
        berthVisible: false,
        rowArray: {},
        dwVisible: false,
        dwType: 4,
        dwLoading: true,
        hasBerths: [],
        selectRows: 0,
        formParam: {
          park_name: '',
          park_no: '',
          chargeRoad_no: '',
          chargeRoad_name: '',
          roadStatus: '1',
          chargeUnit_no: '',
          chargeUnit_name: '',
          chargeUnit_name2: '',
          unit_places: ''
        },
        // 获取row的key值
        getRowKeys(row) {
          return row.place_id
        },
        selectedData: [],
        berth: {
          total: 0,
          berthLoading: true,
          berthList: []
        },
        berthQuery: {
          page: 1,
          limit: 10
        },
        options: [{
          value: '1',
          label: '济南市历下区'
        }, {
          value: '2',
          label: '济南市槐荫区'
        }, {
          value: '3',
          label: '济南市天桥区'
        }, {
          value: '4',
          label: '济南市市中区'
        }, {
          value: '5',
          label: '济南市章丘区'
        }, {
          value: '6',
          label: '济南市历城区'
        }, {
          value: '7',
          label: '济南市平阴县'
        }],
        rules: {
          chargeRoad_name: [
            { required: true, message: '请输入收费路段名称', trigger: 'blur' }
          ],
          chargeRoad_no: [
            { required: true, message: '请输入收费路段编号', trigger: 'blur' }
          ],
          park_name: [
            { required: true, message: '请选择停车场', trigger: 'change' }
          ]
        }
      }
    },
    watch: {
      editChargeVisible(val) {
        this.visible = val
        this.formParam.park_name = this.rowArray.unit_parkname
        this.formParam.park_no = this.rowArray.unit_park
        this.formParam.chargeUnit_no = this.rowArray.unit_sfdw
        this.formParam.chargeUnit_name = this.rowArray.unit_sfdwname
        this.formParam.roadStatus = this.rowArray.unit_status
        this.formParam.chargeRoad_name = this.rowArray.unit_name
        this.formParam.chargeRoad_no = this.rowArray.unit_no
      },
      editRow(val) {
        this.rowArray = val
      },
      visible(val) {
        this.$emit('update:editChargeVisible', val)
      }
    },
    props: [
      'editChargeVisible', 'editRow'
    ],

    methods: {
      /* 关闭弹框之前操作*/
      handleClose(done) {
        this.visible = false
      },
      handleBerthClose(done) {
        this.berthVisible = false
        this.berthQuery.page = 1
        this.berthQuery.limit = 10
      },
      /* 根据停车场查询泊位信息*/
      selectPlaceByPark() {
        if (this.formParam.park_name === '' || this.formParam.park_no === '') {
          this.addError()
          return
        }
        this.berthVisible = true
      },
      openDwDialog() {
        this.dwVisible = true
      },
      selectDwname(val) {
        this.formParam.chargeUnit_no = val.orgno
        this.formParam.chargeUnit_name = val.orgname
      },

      /* 点击泊位编号时操作*/
      berthClickRows(rows, row) {
        let flag = 0 // 移除
        for (const i in rows) {
          if (row.place_id === rows[i].place_id) {
            flag = 1 // 添加操作
            break
          }
        }
        if (flag === 0) {
          for (const j in this.hasBerths) {
            if (this.hasBerths[j] === row.place_id) {
              this.hasBerths.splice(j, 1)
            }
          }
        } else {
          if (row.place_chargeunit !== null && row.place_chargeunit !== '' && row.place_chargeunit !== this.formParam.chargeRoad_no) {
            this.$confirm('此泊位已被其他收费路段占用, 是否继续?', '提示', {
              confirmButtonText: '继续',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.$refs.multipleTable.toggleRowSelection(row, true)
              this.hasBerths.push(row.place_id)
            }).catch(() => {
              this.$refs.multipleTable.toggleRowSelection(row, false)
            })
          } else {
            this.hasBerths.push(row.place_id)
          }
        }
        this.selectRows = rows.length
      },
      selectAll(rows) {
        var v = this
        // remove
        console.log('前一次数量：' + this.selectRows)
        console.log('数量：' + rows.length)
        if (rows.length <= this.selectRows) {
          for (const i in v.berth.berthList) {
            for (const j in v.hasBerths) {
              if (v.hasBerths[j] === v.berth.berthList[i].place_id) {
                v.hasBerths.splice(j, 1)
                break
              }
            }
          }
        } else {
          for (const i in v.berth.berthList) {
            let flag = false
            for (const j in v.hasBerths) {
              if (v.hasBerths[j] === v.berth.berthList[i].place_id) {
                flag = true
                break
              }
            }
            if (!flag) {
              if (v.berth.berthList[i].place_chargeunit !== null && v.berth.berthList[i].place_chargeunit !== '' && v.berth.berthList[i].place_chargeunit !== this.formParam.chargeRoad_no) {
                this.$message.warning('某些泊位被其他收费路段占用，请检查确认')
                v.hasBerths.push(v.berth.berthList[i].place_id)
              } else {
                v.hasBerths.push(v.berth.berthList[i].place_id)
              }
            }
          }
        }
        this.selectRows = rows.length
        console.log(v.hasBerths)
      },
      /* 添加收费路段按钮*/
      updateChargesUnit(formParam) {
        this.$refs[formParam].validate((valid) => {
          if (valid) {
            if (this.hasBerths.length !== 0) {
              this.hasBerths.forEach((value, index) => {
                if (index !== 0) {
                  this.formParam.unit_places += ','
                }
                this.formParam.unit_places += value
              })
            }
            this.addSuccess()
            this.visible = false
            this.formParam.unit_places = ''
            this.$emit('addAfterQueryChargeUnit')
          } else {
            return false
          }
        })
      },
      /* 关闭泊位选择按钮*/
      clearSelectBerth() {
        this.selectedData = []
        this.$refs.multipleTable.clearSelection()
        this.berthVisible = false
      },
      /* 泊位分页操作*/
      berthHandlerCurrentChange(num) {
        this.berthQuery.page = num
        this.selectPlaceByPark()
      },
      berthHandlerSizeChange(num) {
        this.berthQuery.limit = num
        this.selectPlaceByPark()
      },
      resetForm(formParam) {
        this.$refs[formParam].resetFields()
        this.visible = false
      },
      /* 提示信息*/
      addError() {
        this.$message.error('停车场设置有误')
      },
      addSuccess() {
        this.$message.success('编辑成功')
      }
    }
  }
</script>


